<template>
	<view class="order_address_com" @click="navSwitch">
		<template v-if="value && value.id">
			<view class="icon_box">
				<view style="line-height: 60rpx;">
					<u-icon name="map" size="30" color="#666"></u-icon>
				</view>
			</view>
			<view class="address_info">
				<view class="user_info">
					<view class="name">{{value.consignee || value.receiveName}}</view>
					<view class="name">{{ value.postcode }}</view>
					<view class="phone">{{value.mobile || value.receivePhone}}</view>
				</view>
				<view class="addre_info u-line-1">
					{{value.provName}} {{ value.region }} {{value.cityName}}{{value.areaName}}{{value.address || value.receiveDetail}}
				</view>
			</view>
			<view class="icon_box" style="justify-content: center">
				<u-icon v-if="edit" name="arrow-right" size="28" color="#999"></u-icon>
			</view>
		</template>
		<template v-else>
			<view class="null_address">
				<u-icon name="plus" size="40" color="#666"></u-icon>
				<view class="null_msg">{{$t('locales.pleaseAddShippingAddress')}}</view>
			</view>
		</template>
	</view>
</template>

<script>
export default {
	props: {
		value: {
			type: Object,
			default: () => {}
		},
		edit: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {}
	},
	methods: {
		navSwitch() {
			if (!this.edit) return 
			uni.navigateTo({
			    url: '/pages/user/address/index'
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.order_address_com {
	margin: 20rpx;
	border-radius: 12rpx;
	overflow: hidden;
	background-color: #fff;
	display: flex;
	padding: 20rpx 0;
	position: relative;
	.icon_box {
		width: 76rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
	}
	.address_info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.user_info {
			display: flex;
			line-height: 60rpx;
			.name {
				margin-right: 15rpx;
				font-size: 32rpx;
			}
			.phone {
				font-size: 28rpx;
				color: #666;
			}
		}
		.addre_info {
			line-height: 60rpx;
			color: #666;
			width: 570rpx;
		}
	}
	.null_address {
		height: 120rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.null_msg {
			color: #666;
			margin-top: 15rpx;
		}
	}
}
.order_address_com::before {
	content: ' ';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 12rpx;
	background-image: url('http://img.druglots.cn/image/address.png');
	background-repeat: no-repeat;
	background-size: 100%;
}
</style>
